<script setup>
defineProps({
  list: Array,
  activerIndex: {
    type: [Number, String],
    default: 0
  }
})
const emit = defineEmits(["tapItems"])

const tapItem = (item, index) => emit('tapItems', item, index)
</script>
 <!-- xwxs:() xwmd:() -->
<template>
  <div class="flex gap-[0px]">
    <div v-for="(item, index) in list" :key="index" @click="tapItem(item, index)"
      :class="activerIndex === index ? 'bg-blue-100' : ''"
      :style="activerIndex === index ? 'color:var(--pro-admin-layout-content-bg)' : ''"
      class="xwxs:( min-w-[92px]) xwmd:(min-w-[72px]) whitespace-nowrap px-[20px] rounded-[8px] text-[16px] h-[48px] flex justify-center items-center font-semibold cursor-pointer hover:(bg-blue-50 text-[var(--pro-admin-layout-content-bg)]) active:(!bg-blue-100)">
      {{ item.name }}
    </div>
  </div>
</template>

<style  scoped></style>
 